<template>
  <!-- 使用 ref="chartContainer" 获取 DOM 节点 -->
  <div
    ref="chartContainer"
    :class="props.className"
    :style="{ height: props.height, width: props.width }"
  ></div>
</template>

<script setup>
import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
import * as echarts from 'echarts';
import 'echarts/theme/macarons';

// 定义组件 props
const props = defineProps({
  className: {
    type: String,
    default: 'chart',
  },
  width: {
    type: String,
    default: '100%',
  },
  height: {
    type: String,
    default: '200px',
  },
  seriesname: {
    type: String,
    default: '',
  },
  autoResize: {
    type: Boolean,
    default: true,
  },
  chartData: {
    type: Array,
    default: () => [],
  },
  xAxisData: {
    type: Array,
    default: () => [],
  },
  lineColor: {
    type: Array,
    default: () => [],
  },
  color: {
    type: String,
    default: 'rgb(1, 191, 236, 1)',
  },
});

// 获取图表容器 DOM 节点及 ECharts 实例引用
const chartContainer = ref(null);
const chart = ref(null);

// 初始化图表
function initChart() {
  if (chartContainer.value) {
    console.log(chartContainer.value, 'chartContainer.value');
    // 使用主题 'macarons' 初始化图表
    chart.value = echarts.init(chartContainer.value, 'macarons');
    // 初始化时设置图表配置
    setOptions(props.chartData);
  }
}

// 设置图表配置项
function setOptions(expectedData) {
  if (!chart.value) return;

  const dataZoom = [
    {
      type: 'inside',
      start: 0,
      end: 100,
    },
    {
      show: false,
      start: 0,
      end: 100,
    },
  ];

  chart.value.setOption({
    color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985',
        },
      },
    },
    dataZoom,
    grid: {
      left: '3%',
      top: '4%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: props.xAxisData,
        axisLabel: { color: 'rgb(150,150,150)' },
        axisLine: {
          lineStyle: { color: 'rgb(150,150,150)' },
        },
        axisTick: {
          lineStyle: { color: 'rgb(150,150,150)' },
          show: true,
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        splitLine: { show: false },
        splitArea: { show: false },
        axisLabel: { color: 'rgb(150,150,150)' },
        axisLine: {
          show: false,
          lineStyle: { color: 'rgb(150,150,150)' },
        },
        axisTick: {
          lineStyle: { color: 'rgb(150,150,150)' },
          show: false,
        },
      },
    ],
    series: [
      {
        name: props.seriesname,
        type: 'line',
        smooth: true,
        symbolSize: 5,
        sampling: 'average',
        itemStyle: {
          color: props.color,
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            props.lineColor,
          ),
        },
        emphasis: {
          focus: 'series',
        },
        data: expectedData,
      },
    ],
  });
}

// 监听 props.chartData 深度变化，更新图表
watch(
  () => props.chartData,
  (newVal) => {
    console.log(newVal);
    setOptions(newVal);
  },
  { deep: true },
);

// 如果启用 autoResize，则定义窗口尺寸改变时触发图表 resize
function resizeChart() {
  if (chart.value) {
    chart.value.resize();
  }
}

onMounted(() => {
  initChart();
  if (props.autoResize) {
    window.addEventListener('resize', resizeChart);
  }
});

onBeforeUnmount(() => {
  if (chart.value) {
    chart.value.dispose();
    chart.value = null;
  }
  if (props.autoResize) {
    window.removeEventListener('resize', resizeChart);
  }
});
</script>
